<template>
    <el-dialog title="选择收货地址" :visible.sync="dialogVisible" width="40%"
               :before-close="handleClose">

        <div @click="selectedAddress=item" :class="{active:selectedAddress.id===item.id}"
             class="item" v-for="item in list" :key="item.id">
            <ul>
                <li><span>收<i/>货<i/>人：</span>{{item.receiver}}</li>
                <li><span>联系方式：</span>{{item.contact.replace(/^(\d{3})\d{4}(\d{4})$/,'$1****$2')}}</li>
                <li><span>收货地址：</span>{{item.fullLocation.replace(/ /g,'')+item.address}}</li>
            </ul>
        </div>

        <span slot="footer" class="dialog-footer">
                <el-button @click="handleClose">取 消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
            </span>
    </el-dialog>
</template>

<script>

    export default {
        name: "AddressSelect",
        props: {
            list: {
                default: () => [],
                type: Array
            }
        },
        data() {
            return {
                dialogVisible: false,
                selectedAddress: {}
            }
        },
        methods: {
            open() {
                this.dialogVisible = true
            },
            handleClose() {
                this.dialogVisible = false
                this.selectedAddress = {}
            },

            submit() {
                this.$emit('confirmAddress', this.selectedAddress)
                this.handleClose()
            }
        }
    }
</script>

<style scoped lang="less">

    .item {
        flex: 1;
        min-height: 90px;
        display: flex;
        align-items: center;
        margin: 10px 50px;
        border: 1px solid #f5f5f5;
        cursor: pointer;

        &.active, &:hover {
            border-color: @xtxColor;
            background: lighten(@xtxColor, 50%);
        }

        > ul {
            padding: 10px;
            font-size: 14px;
            line-height: 30px;
        }

    }

</style>